<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:100px;height:110px;background: red;padding:20px;border:solid 30px black;margin:40px;position: absolute;left:50px;top:50px;overflow:auto;}
    </style>
</head>
<body>
    <div class="box">包含块：距离当前元素最近的具有定位属性的父元素包含块：距离当前元素最近的具有定位属性的父元素包含块：距离当前元素最近的具有定位属性的父元素包含块：距离当前元素最近的具有定位属性的父元素包含块：距离当前元素最近的具有定位属性的父元素包含块：距离当前元素最近的具有定位属性的父元素包含块：距离当前元素最近的具有定位属性的父元素包含块：距离当前元素最近的具有定位属性的父元素包含块：距离当前元素最近的具有定位属性的父元素</div>
</body>
<script>

    var box = document.querySelector(".box")
    
    // console.log( getComputedStyle(box).width )
    // console.log( getComputedStyle(box).paddingLeft )
    // console.log( getComputedStyle(box).paddingRight )

    console.log( box.clientWidth );     // 内容 + padding
    console.log( box.offsetWidth );     // 内容 + padding + border

    console.log( box.offsetLeft );      // 当前元素距离包含块的对应边的距离

    // 当前元素的总高度（包括可滚动的距离）
    console.log( box.scrollHeight );

    document.onclick = function(){
        // 获取滚走了的距离
        console.log( box.scrollTop );
        
        // 设置滚走了的距离
        box.scrollTop = 300;
    }


    // 包含块：距离当前元素最近的具有定位属性的父元素





    
</script>
</html>